<script setup>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import { ref, watch } from 'vue';

const arr = JSON.parse(localStorage.getItem('list')) || [
  { id: 1, name: '吃饭', done: true },
  { id: 2, name: '睡觉', done: true },
  { id: 3, name: '敲代码', done: false },
]
const list = ref(arr)

// 数据持久化 watch
watch(list, (val, oldVal) => {
  localStorage.setItem('list', JSON.stringify(val))
}, { deep: true })

/* 
  修改状态
  1. 父组件定义好方法，传递给子组件
  2. 子组件通过 defineEmits 接受，
      当 input 状态改变(change事件),把改变的 id 传给父组件
  3. 父组件接收到，找到 id 对应的数据，修改它的状态
*/
const changeFn = (id) => {
  // console.log('id', id);
  // find返回符合条件的 数据
  const obj = list.value.find(v => v.id === id)
  obj.done = !obj.done
}

const del = (id) => {
  // 方法1，查找在数组中的下标 index ，通过splice的方法删除
  // findIndex返回符合条件的 下标
  // const index = list.value.findIndex(v => v.id === id)
  // console.log('index', index);
  // list.value.splice(index, 1)

  // 方法2，通过过滤的方式,
  // 传过来的id需要删除掉，所以保留下，不等于传来的 id 即可
  list.value = list.value.filter(v => v.id !== id)
}

const add = (name) => {
  const obj = { id: Date.now(), name, done: false }
  // 需要添加到未完成列表的第一条，所以使用 unshift
  list.value.unshift(obj)
}

const changeAll = (bl) => {
  // 传递给子组件，子组件触发时，
  // 把需要改成什么状态，告诉我，我全部都改这个状态即可
  list.value.forEach(v => v.done = bl)
}

</script>

<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="list" @changeFn="changeFn" @del="del" @changeAll="changeAll"></TodoMain>
    <TodoFooter :list="list"></TodoFooter>
  </section>
</template>

<style>
</style>
